<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input id="files-list" type="file"></input>
  <div id="progress"></div>
  <div id="output" style="height: max-count"></div>

  <script>
    const filesList = document.querySelector('#files-list');
    filesList.addEventListener('change', event => {
      const info = '';
      const output = document.querySelector('#output');
      const progress = document.querySelector('#progress');
      const files = event.target.files;
      const type = 'default';
      const reader = new FileReader();
      console.log(files[0]);
      const blob = files[0].slice(0, 32);
      //   if (/image/.test(files[0].type)) {
      //     reader.readAsDataURL(files[0]);
      //     type = 'image';
      //   } else {
      //     reader.readAsText(files[0]);
      //     type = 'text';
      //   }

      //   reader.addEventListener('error', () => {
      //     output.innerHTML = `Could note read file, error code is${reader.error.code}`;
      //   });

      //   reader.addEventListener('progress', event => {
      //     if (event.lengthComputable) {
      //       progress.innerHTML = `${event.loaded}/${event.total}`;
      //     }

      //     reader.addEventListener('load', () => {
      //       let html = '';
      //       switch (type) {
      //         case 'image':
      //           html = `<img src="${reader.result}">`;
      //           break;

      //         case 'text':
      //           html = reader.result;
      //           break;
      //       }

      //       output.innerHTML = html;
      //     });
      //   });

      if (blob) {
        console.log(blob);
        reader.readAsText(blob);
        reader.addEventListener('error', () => {
          output.innerHTML = `could not read file, error code is ${reader.error.code}`;
        });
        reader.addEventListener('load', () => {
          console.log(reader.result);
          output.innerHTML = reader.result;
        });
      } else {
        console.log("Your browser doesn't support slice()");
      }
    });

    () => {
      const filesList = document.querySelector('#files-list');
      filesList.addEventListener('change', event => {
        const info = '',
          output = document.querySelector('#output'),
          progress = document.querySelector('#progress'),
          files = event.target.files,
          reader = new FileReader(),
          url = URL.createObjectURL(files[0]);

        if (url && /image/.test(files[0].type)) {
          output.innerHTML = `<img src="${url}" />`;
        } else {
          output.innerHTML = "Your browser doesn't support object URLS";
        }
      });
    };

    () => {
      const droptarget = document.querySelector('#droptarget');
      function handleEvent(event) {
        let info = '',
          output = document.querySelector('#output'),
          files,
          i,
          len;
        event.preventDefault();
        if (event.type === 'drop') {
          files = event.dataTransfer.files;
          i = 0;
          len = files.length;
    
          while (i < len) {
            info += `${files[i].name}（${files[i].type}）,${files[i].size} bytes <br>`;
            output.innerHTML = info;
            i++;
          }

          droptarget.addEventListener('dragenter', handleEvent);
          droptarget.addEventListener('dragover', handleEvent);
          droptarget.addEventListener('drop', handleEvent);
        }
      }
    };
  </script>

</body>

</html>